<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://chances.com.cn/jsp/epgdata" prefix="epgdata"%>

<!DOCTYPE html>
<html>
<head>
	<title>SMART_TV</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<%@include file="/sites/weixin/js/common.jsp" %>
<%@include file="/sites/weixin/common/common_js.jsp" %>
<script type="text/javascript" src="${_templatePath}/js/wx.js"></script>
<link rel="stylesheet" type="text/css" href="${_contextPath}/sites/weixin/css/wx.css" />
<style>.swiper-slide {margin-right:8%;}</style>
<body onload="init()">
<epgdata:content type="series" var="content" code="${_context.contentCode}" />
<epgutils:contentConvert var="seriesConvert" content="${content}"/>
<div id="app">
<!-- 头部 -->
	<div class="row menu-row navbar-fixed-top">
		<div class="col-xs-2 menu-col"  onclick="onBackEvent();">
			<img src="${_templatePath}/images/back.png" class="menu-col-back"/>
		</div>
		<div class="col-xs-8 detail-title" v-text="zongyi.title"></div>
		<div class="col-xs-2 menu-col" @click="collect(zongyi.contentCode,zongyi.title,zongyi.still,'series2','',userId,category)">
			<img id="collectImage" src="${_contextPath}/sites/weixin/images/wx_collect.png" class="menu-col-back"/>
		</div>
	</div>
	<!-- 剧集介绍 -->
	<div class="row row-detail" style="margin-top:4em;">
		<div class="col-xs-4 row-empty">
			<img  class="lazyImg content-image" src="${_contextPath}/sites/weixin/images/defaultBg_3.jpg" :data-original="resourcePath+zongyi.still"/>
		</div>
		<div class="col-xs-8 col-content">
			<div class="detail-title-small" v-text="zongyi.title"></div>
			<div class="detail-text"><span>类型：</span><span style="color:#aaaaaa">${seriesConvert.contentBaseTags}</span></div>	
			<div class="detail-text"><span>主持人：</span><span style="color:#aaaaaa" v-text="zongyi.compere"></span></div>
			<!-- <div class="two-line"><span style="color:#000;">主演：</span><span v-text="zongyi.actors"></span></div> -->
			<div class="div-image-tv" @click="playZongyi()">
				<img style="max-width:70px;" src="${_templatePath}/images/tvshow.png"/>
			</div>
		</div>
	</div>
	<div class="row detail-description">
		<div class="col-xs-12 row-empty"><span>简介：</span><span style="color:#aaaaaa" v-text="zongyi.summaryMedium"></span></div>
	</div>
	<div class="index-line-detail"></div>	
	<div class="row row-detail" >
		<div class="col-xs-3 row-empty"><img src="${_templatePath}/images/jj.png" style="max-height: 2em;"/></div>
		<div class="col-xs-9 series-update" v-text="'更新至'+zongyi.updateNo+'期'"></div>
	</div>
	<div class="index-line-detail" style="height:0.2em;"></div>
	
	<!-- 集数区间选择 -->
	<div  id="scroll_menu_swiper"  class="swiper-container" >
		<div id="scroll_menu"  class="swiper-wrapper" style="margin-left:3%;">
			<template v-for="n in tabNum">
				<div class="swiper-slide">
					<div :id="'tab_'+n" class="inner-ep" @click="chooseTab(n);" v-text="getTabText(n)"></div>
				</div>
			</template>
		</div>
	</div>
	<!-- 子集列表 -->
	<template v-for="(item,index) in eposideCat">
		<div class="row row-detail" style="margin-top:0.2em;" :id="'content_'+index"
			@click="chooseFcs(index,item.contentCode,item.contentTitle)">
			<div :id="'ep_'+index" class="col-xs-12 row-empty search-zongyi" v-text="getDate(item.issueDate,'')+'期: '+item.contentTitle"></div>
		</div>
	</template>

	<!-- 相关推荐 -->
	<div class="index-line-detail" style="height:0.2em;"></div>
	<div class="row row-detial-rel" style="margin-top:0.5em;">
		<div class="col-xs-3" style="padding-left:0.4em;"><img src="${_templatePath}/images/xg.png" style="max-height: 2em;"/></div>
	</div>
	<div class="row row-content" style="marggin-bottom:0px;">
	<template v-for="(item,index) in zongyiRelateCat.resultSet">
		<template v-if="index%2 == 0">
			<div class="row row-empty"></div>
		</template>
		<div class="col-xs-6 col-content" >
			<div style="overflow: hidden" v-bind:id="'zonyi_'+index" v-on:click="gotoLink(item.url,'zonyi_'+index)">
				<img  class="lazyImg content-image" :src="contextPath+'/sites/weixin/images/defaultBg_3.jpg'" 
					:data-original="item.still"/>
			</div>
			<div class="index-text" v-text="item.title"></div>
			<div v-if="item.type == 'series2'" class="update-to" v-text="'更新至'+item.updateNum+'期'"></div>
			<div class="index-text" style="color:#aaaaaa;font-size:1em;" v-text="item.childrenTitle==null?item.title:item.childrenTitle"></div>
		</div>
	</template>
	</div>
</div>
<!-- 提示缺失集数未上线 -->
<div id="notOnLine" style="display:none;text-align:center;line-height:5em; position:fixed;left:15%;top:40%; width: 70%;height:5em;background-color: black;color:white;border-radius:1em;font-size:1.5em;z-index:99999;opacity:0.6;">抱歉，本集未上线！</div>
<%@include file="/sites/weixin/common/bodyEndVm.jsp" %>
</body>
<script>
var vm = new Vue({
	el:"#app",
	data:{
		resourcePath:'${_resourcePath}',
		contextPath:'${_contextPath}',
		zongyi:'',
		zongyiRelateCat:'',
		tabNum:1,
		pageCount:5,
		pageSize:5,
		currentTabIdx:1,
		currentEpId:-1,
		eposideCat:'',
		items:[],
		userId:'${EPG_USER_SESSION.userId}',
		category:'${_context.containerCode}',
		focusEpiTabIdx:1
	},
    mounted: function () {
		this.$nextTick(function () {
			this.getZongyi();
			this.initCollectImage(this.zongyi.contentCode);
			this.setTabNum(this.zongyi.updateNum);
			this.getZongyiRelateCat();
			this.startSwiper();
			//this.chooseTab(1);
			this.initTab();
			this.lazyLoad();
	 	});
    },
	methods:{
		getZongyi:function(){
			$.ajax({
				method:"get",
				url:"${_contextPath}/api/series/${_context.contentCode}.json",
				async:false,
				success:function(data){
					/* console.log("zongyi");
					console.log(data); */
					vm.zongyi = data.result;
					var arr = data.items;
					//共更新多少集
					vm.zongyi.updateNum = 0;
					if(arr && arr.length>0){
						vm.items = arr;
						var len = arr.length;
						vm.zongyi.updateNum = len;
						if(len > 5){
							//5条展示子集
							vm.zongyi.eposideCat = arr.slice(0,5);
						}
						//最新期数
						vm.zongyi.updateNo = getDate(arr[0].issueDate,"-");
					} else {
						vm.zongyi.updateNo = 0;
					}
				}
			});
		},
		setTabNum:function(updateNum){
			this.tabNum = this.countTabNum(updateNum,this.pageCount);
		},
		countTabNum: countTabNum,
		getZongyiRelateCat:function(){
			var params = {
					size:6,
					isRandom:true,
					p_idx:1,
					bizCode:"${_context.bizCode}",
					siteCode:"${_context.siteCode}",
					categoryCode:"${_context.containerCode}",
					type:'综艺'
			};
			$.ajax({
				method:"get",
				url:"${_contextPath}/api/search/filter.json",
				data:params,
				async:false,
				success:function(data){
					//console.log(data);
					vm.zongyiRelateCat = data;
				}
			});
		},
		lazyLoad:function(){
			$(document).ready(function(){
				$(".lazyImg").lazyload({ 
			        placeholder : "images/defaultBg_3.jpg", 
			        effect : "fadeIn" 
		   			}); 
			});
		},
		startSwiper:function(){
			$(document).ready(function(){
			   var names = ["#scroll_menu_swiper"];
		   		$.each(names,function(i,val){
		   			 var swiper1 = new Swiper(val, {
		    			  	 slidesPerView: 'auto',
		       				 //spaceBetween: 10
		   			 });
		   		});
			 });
		},
		getTabText:function(tabIdx){
			//console.log(tabIdx);
			if(tabIdx < this.tabNum){
				return parseInt((tabIdx-1)*5+1) + '-' + tabIdx*5;
			}else{
				return parseInt((tabIdx-1)*5+1) + '-' + this.zongyi.updateNum;
			}
		},
		getNum:function(n){
			return (this.currentTabIdx-1)*5+n;
		},
		chooseTab:function(tabIdx){
			this.changeContent(tabIdx);
			if(tabIdx == this.tabNum){
				this.pageCount = this.zongyi.updateNum%5;
			}else{
				this.pageCount = 5;
			}
			var self = this;
			$("#tab_"+self.currentTabIdx).css("color","#000000");
			this.currentTabIdx = tabIdx;
			setTimeout(function(){
				$("#tab_"+tabIdx).css("color","#16a3b7");
			},100);
			
			//选中子集在当前页显示聚焦效果，否则清除聚焦效果
			if(this.focusEpiTabIdx == this.currentTabIdx){
				$("#ep_"+this.currentEpId).css("color","#16a3b7");
			}else{
				this.clearCurrentEpi();
			}
		},
		initTab:function(){
			if(strExist("${param.epiCode}")){
				var idx = this.getIdxInArr("${param.epiCode}")+1;
				if(idx==0){
					idx = 1;
				}
				this.chooseTab(this.countTabNum(idx,this.pageCount));
				var idx = idx%this.pageSize;
				idx = (idx==0?this.pageSize:idx);
				this.changeStyle(idx-1);
			}else{
				this.chooseTab(1);
			}
		},
		getIdxInArr:function(epiCode){
			var idx = -1;
			for(var i=0;i<this.items.length;i++){
				if(this.items[i].contentCode == epiCode){
					idx = i;
					break;
				}
			}
			return idx;
		},
		changeContent:function(tabIdx){
			//保证有五条内容
			this.eposideCat = [];
			/* var content = {contentCode:"",contentTitle:""};
			for(var i=0;i<5;i++){
				this.eposideCat.push(content);
			} */
			var items = vm.items.slice((tabIdx-1)*5,(tabIdx-1)*5+5);
			for(var i=0;i<items.length;i++){
				this.eposideCat[i] = items[i];
			}
		},
		chooseFcs:function(num,contentCode,title){
			this.changeStyle(num);
			var params = {
					userId:'${EPG_USER_SESSION.userId}',
					type:'series2',
					code:contentCode,
					prog:this.zongyi.contentCode,
					title:title,
					icon:''
				}
			play(params,"${personUrl}",'series2_detail');
		},
		changeStyle:function(num){
			$("#ep_"+this.currentEpId).css("color","#000000");
			this.focusEpiTabIdx = this.currentTabIdx;
			this.currentEpId = num;
			setTimeout(function(){
				$("#ep_"+num).css("color","#16a3b7");
			},100);
		},
		playZongyi:function(){
			if(this.items.length == 0){
				return true;
			}
			this.clearCurrentEpi();
			this.focusEpiTabIdx = 1;
			this.currentEpId = 0;
			this.focusFirstEpi();
			var params = {
					userId:'${EPG_USER_SESSION.userId}',
					type:'series2',
					code:this.items[0].contentCode,
					prog:this.zongyi.contentCode,
					title:this.items[0].contentTitle,
					icon:''
			};
			play(params,"${personUrl}",'series2_detail');
		},
		clearCurrentEpi:function(){
			$("#ep_"+this.currentEpId).css("color","#000000");
		},
		focusFirstEpi:function(){
			if(this.currentTabIdx == 1){
				$("#ep_"+this.currentEpId).css("color","#16a3b7");
			}
		},
		collect:collect,
		initCollectImage:initCollectImage,
		gotoLink:gotoLink,
		getDate:getDate
	}
});
function init(){
}
</script>
</html>